<template>
  <div class="lf-html-wrapper">
    <!-- <div v-if="true" class="active"></div> -->
    <div class="custom-html" :class="{ active }">
      <div class="custom-head" :class="memberList.length ? 'choosed' : 'no-choose'">{{ name }}</div>
      <div class="custom-body">
        <!-- <SetMember v-model:memberType="personLiableType" v-model:memberList="memberList" @change="memberChange" /> -->
        <Icon size="20" class="custom-icon"><UsergroupAddOutlined /></Icon>
        <a-tooltip :title="getLabels(memberList)">
          <span v-if="memberList.length" class="select-result">{{ getLabels(memberList) }}</span>
        </a-tooltip>
        <a-button v-if="$props.updateFlag" type="link" size="small" @mousedown="showModal">{{
          memberList.length ? '重新选择' : '选择审批人'
        }}</a-button>
      </div>
    </div>

    <!--选择审批人-->
    <chooseMember
      ref="chooseMemberRef"
      :member-type="personLiableType"
      :choosed-keys="memberList"
      @close="selectChange"
    ></chooseMember>
  </div>
</template>

<script lang="ts">
import { ref, defineComponent, onMounted } from 'vue'
import { UsergroupAddOutlined } from '@vicons/antd'
// import { ArrowForwardCircleOutline } from '@vicons/ionicons5'
import { Icon } from '@vicons/utils'
import chooseMember from '@@/components/chooseMember/index.vue'
import { intersectionBy } from 'lodash-es'

export default defineComponent({
  name: 'SelectTaskHtml',
  components: { chooseMember, UsergroupAddOutlined, Icon },
  props: {
    id: {
      type: String,
      default: ''
    },
    name: {
      type: String,
      default: ''
    },
    // eslint-disable-next-line vue/prop-name-casing
    'flowable:candidateGroups': {
      type: String,
      default: ''
    },
    // eslint-disable-next-line vue/prop-name-casing
    'flowable:candidateUsers': {
      type: String,
      default: ''
    },
    // eslint-disable-next-line vue/prop-name-casing
    'flowable:candidateUsersName': {
      type: String,
      default: ''
    },
    // eslint-disable-next-line vue/prop-name-casing
    'flowable:candidateGroupsName': {
      type: String,
      default: ''
    },
    updateFlag: {
      type: Boolean,
      default: false
    },
    graphModel: {
      type: Object,
      default: () => ({})
    },
    optionalNodes: {
      type: Array,
      default: () => []
    },
    targetKey: {
      type: String,
      default: ''
    }
  },
  setup: (props, context) => {
    const { emit } = context
    const title = ref<string>(props.name)
    const active = ref<boolean>(false)
    props.graphModel.eventCenter.on('node:click', (el) => {
      setLineAnimation(el.data.id)
    })
    // props.graphModel.eventCenter.on('blank:click', () => {
    //   active.value = false
    // })
    const personLiableType = ref<number>(0)
    const memberList = ref<Array<any>>([])
    const chooseMemberRef = ref()
    const candidateUsersName = ref<string>(
      props['flowable:candidateUsersName'] || props['flowable:candidateGroupsName'] || '点击设置审批人'
    )
    onMounted(() => {
      updateDate()
      setLineAnimation(props.targetKey)
    })
    const setLineAnimation = (targetId) => {
      if (props.optionalNodes.includes(targetId)) {
        active.value = targetId === props.id
        if (active.value) {
          const nodeIds = props.graphModel.getNodeIncomingNode(targetId)
          // 获取条件流转节点
          const getWayNode = nodeIds.find((item) => item.type === 'exclusiveGateway')
          // 获取条件流转节点的出边
          const getWayNodeOutEdges = props.graphModel.getNodeOutgoingEdge(getWayNode.id)
          // 获取当前节点的入边
          const currNodeInEdges = props.graphModel.getNodeIncomingEdge(targetId)
          // 获取条件流转节点的出边和当前节点的入边的交集
          const intersection: any[] = intersectionBy(getWayNodeOutEdges, currNodeInEdges, 'id')
          emit('selectOptionalNode', getWayNode.id, intersection[0].id, targetId)
        }
      }
    }
    const memberChange = (data) => {
      emit('changeData', { id: props.id, personLiableType: Number(personLiableType.value), memberList: data })
    }
    const updateDate = () => {
      if (props['flowable:candidateUsers'] && props['flowable:candidateUsersName']) {
        personLiableType.value = 0
        const useIds = props['flowable:candidateUsers'].split(',')
        const names = props['flowable:candidateUsersName'].split(',')
        memberList.value = useIds.map((item, index) => {
          return {
            value: item,
            label: names[index]
          }
        })
      } else if (props['flowable:candidateGroups'] && props['flowable:candidateGroupsName']) {
        personLiableType.value = 1
        const roleIds = props['flowable:candidateGroups'].split(',')
        const names = props['flowable:candidateGroupsName'].split(',')
        memberList.value = roleIds.map((item, index) => {
          return {
            value: item,
            label: names[index]
          }
        })
      }
    }
    const getLabels = (data) => {
      const temp = data.map((item) => item.label)
      return temp.join(',')
    }
    const showModal = () => {
      chooseMemberRef.value.show()
    }
    const selectChange = ({ type, data }) => {
      personLiableType.value = type
      memberList.value = data
      memberChange(data)
    }
    return {
      title,
      candidateUsersName,
      chooseMemberRef,
      personLiableType,
      memberList,
      memberChange,
      showModal,
      selectChange,
      active,
      getLabels
    }
  }
})
</script>

<style lang="less" scoped>
.lf-html-wrapper {
  position: relative;
}
.lf-html-wrapper .custom-html {
  width: 168px;
  height: 68px;
  background-color: #fff;
  // border-radius: 6px;
  position: relative;
  top: 5px;
  left: 5px;
  box-shadow: 0px 3px 5px 1px #e0e0e0;
}
.lf-html-wrapper .custom-html .suffix-icon {
  width: 24px;
  height: 24px;
  border-radius: 12px;
  background-color: #fff;
  position: absolute;
  right: 5px;
  top: 15px;
}

.lf-html-wrapper .custom-head {
  color: #fff;
  // background-color: rgb(241, 123, 25);
  // background-color: rgb(241, 75, 25);
  height: 26px;
  line-height: 26px;
  text-align: center;
}

.no-choose {
  background-color: rgb(241, 75, 25);
}
.choosed {
  background-color: #76c46f;
}

.lf-html-wrapper .custom-body {
  color: #666;
  height: 50px;
  line-height: 50px;
}
.lf-html-wrapper .custom-body .user-list {
  width: calc(100% - 40px);
  display: inline-block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
.custom-icon {
  vertical-align: middle;
  margin-right: 5px;
}
.active {
  box-shadow: 0px 0px 5px 2px #f00 !important;
}
:deep(.select-result) {
  display: inline-block;
  width: 70px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}
</style>
